{include file=$header_start}
{strip}
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/dashboard.css">
<script src="{$siteroot}/includes/js/myaccount.js" type="text/javascript"></script>
<script src="{$siteroot}/includes/js/admin/ajax.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/map.css">
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=AIzaSyDdttY53OplH9vGSM9waT-lXkDGu6ocCnA" type="text/javascript"></script>
{/strip}
{literal}
<script type="text/javascript">

function showJobType(jid)
{
	if(jid!='')
	{
		document.getElementById("isJobType").style.display='block';	
		document.getElementById("isnullJobType").style.display='none';	
		ajax.sendrequest("GET",SITEROOT + "/modules/register/show_jobtype.php",{jid:jid},"","isJobType");
	}
	else
	{
		document.getElementById("isJobType").style.display='none';	
		document.getElementById("isnullJobType").style.display='block';	
	}
}

</script>
<script type="text/javascript">
function numbersonly(e)
{		

	var unicode=e.charCode? e.charCode : e.keyCode;		
	//alert(unicode)
	if (unicode!=8 && unicode !=9  &&  unicode !=39 &&  unicode != 46 &&  unicode !=  34 )
	{ 	
		//if the key isn't the backspace,Tab key (which we should allow)
		if (unicode<48||unicode>57) //if not a number
			return false; //disable key press
	}
}

function search_google()
{
	
	var google_address = $("#googlesearch").val();
	var radius = $("#radius").val();
	if(google_address =='')
	{
		document.getElementById('google_address_error').innerHTML = "<span class='error'>Enter only australian postal code</span>";
		document.getElementById('googlesearch').focus();
		return false;
	}
	if(radius =='')
	{
		document.getElementById('radius_errror').innerHTML = "<span class='error'>Please Select Radius</span>";
		document.getElementById('radius').focus();
		return false;
	}
	if(google_address !='' && radius !='')
	{	
		
		$.get(SITEROOT + "/modules/register/latlong.php",{postalcode:google_address},function(data){			
			if(data == 0)
			{
				document.getElementById('google_address_error').innerHTML = "<span class='error'>Enter only australian postal code</span>";	
				document.getElementById('nxtbtn').style.display='none';
			}
			else
			{
				document.getElementById('radius_errror').innerHTML = "";
				document.getElementById('google_address_error').innerHTML = "";
				showAddress(data,radius);	
				document.getElementById('submitbtn').style.display='block';
				document.getElementById('workarea').value = google_address;	
				document.getElementById('hidden_radius').value = radius;	

			}
		});
		
	}
}


//<![CDATA[

_mSvgEnabled = true;
_mSvgForced  = true;


var center ;
var circle ;
var radius ;
var marker = [] ;
var poly = [] ;
var line ;
var icon ;
var gicon ;
var map ;


function explodeArray(item,delimiter) 
{
	tempArray=new Array(1);
	var Count=0;
	var tempString=new String(item);
	
	while (tempString.indexOf(delimiter)>0) {
	tempArray[Count]=tempString.substr(0,tempString.indexOf(delimiter));
	tempString=tempString.substr(tempString.indexOf(delimiter)+1,tempString.length-tempString.indexOf(delimiter)+1);
	Count=Count+1
	}

	tempArray[Count]=tempString;
	return tempArray;
} 

function load(postalcode,miles)
{
	var myArray = explodeArray(postalcode,','); 	
		
		 map = new GMap2(document.getElementById("map"));
		 var start = new GLatLng(-33.8737,151.2069);
		 if(miles >=1 && miles < 10)
		 	map.setCenter(start, 11);
		 if(miles >=10 && miles < 25)
		 	map.setCenter(start, 10);
		if(miles >=25 && miles < 50)
		 	map.setCenter(start, 9);				
		if(miles >=50 && miles < 100)
		 	map.setCenter(start, 8);					
		
		 map.addControl(new GLargeMapControl());
		 map.addControl(new GMapTypeControl());
		 map.addControl(new GScaleControl()) ;
		 map.addControl(new GOverviewMapControl()) ;
		
		 icon = new GIcon();
		 icon.image = "http://maps.huge.info/images/red_marker.png";
		 icon.shadow = "http://maps.huge.info/images/mm_20_shadow.png";
		 icon.iconSize = new GSize(12, 20);
		 icon.shadowSize = new GSize(22, 20);
		 icon.iconAnchor = new GPoint(6, 20);
		
		 gicon = new GIcon(icon);
		 gicon.image = "http://maps.huge.info/images/mm_20_green.png";
		
		// gicon.iconAnchor = new GPoint(30, 20);
		 center = new GMarker(start, {icon:icon, draggable: true});
		 map.addOverlay(center);
		 center.enableDragging();
		
		 GEvent.addListener(center,'dragend',function() {drawCircle()});
		
		 oldpoint = center.getPoint() ;
		 miles =miles * 0.621371192;	
		 radius = new GMarker(new GLatLng(-33.873651,151.224304), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.864429,151.221828), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.865498,151.212816), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.859193,151.20689), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.86113,151.198183), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.869275,151.200285), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.873651,151.189476), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.88088,151.191809), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.886172,151.198183), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.88367,151.207237), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.886172,151.215597), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.876045,151.216593), {icon:gicon, draggable: true});
		 radius = new GMarker(new GLatLng(-33.873651,151.224304), {icon:gicon, draggable: true});
		 
		 map.addOverlay(radius);
		 radius.enableDragging();
		
		 GEvent.addListener(radius,'dragend',function() {drawCircle()});
		
		
		 drawCircle( )	
	
}


function showAddress(postalcode,miles)
{
	var myArray = explodeArray(postalcode,','); 
	
		
		 map = new GMap2(document.getElementById("map"));
		 var start = new GLatLng(myArray[0],myArray[1]);
		 if(miles >=1 && miles < 10)
		 	map.setCenter(start, 11);
		 if(miles >=10 && miles < 25)
		 	map.setCenter(start, 10);
		if(miles >=25 && miles < 50)
		 	map.setCenter(start, 9);				
		if(miles >=50 && miles < 100)
		 	map.setCenter(start, 8);					
		
		 map.addControl(new GLargeMapControl());
		 map.addControl(new GMapTypeControl());
		 map.addControl(new GScaleControl()) ;
		 map.addControl(new GOverviewMapControl()) ;
		
		 icon = new GIcon();
		 icon.image = "http://maps.huge.info/images/red_marker.png";
		 icon.shadow = "http://maps.huge.info/images/mm_20_shadow.png";
		 icon.iconSize = new GSize(12, 20);
		 icon.shadowSize = new GSize(22, 20);
		 icon.iconAnchor = new GPoint(6, 20);
		
		 gicon = new GIcon(icon);
		 gicon.image = "http://maps.huge.info/images/mm_20_green.png";
		
		// gicon.iconAnchor = new GPoint(30, 20);
		 center = new GMarker(start, {icon:icon, draggable: true});
		 map.addOverlay(center);
		 center.enableDragging();
		
		 GEvent.addListener(center,'dragend',function() {drawCircle()});
		
		 oldpoint = center.getPoint() ;
		 miles =miles * 0.621371192;	
		 radius = new GMarker(getRadius(miles,center), {icon:gicon, draggable: true});
		 map.addOverlay(radius);
		 radius.enableDragging();
		
		 GEvent.addListener(radius,'dragend',function() {drawCircle()});
		
		
		 drawCircle( )	
	
}

function getRadius( miles, center )
{
 var point = center.getPoint() ;
 var lat = point.lat() ;
 var lng = point.lng() ;
 var d2r = Math.PI/180 ;               
 var r2d = 180/Math.PI ;               
 var Clat = (miles/3963) * r2d ;       
 var Clng = Clat/Math.cos(lat*d2r);
 Clng = lng + (Clng * Math.cos(0)) ;
 Clat = lat + (Clat * Math.sin(0)) ;
 return(new GLatLng(Clat,Clng)) ;
} 


function distance(lat1,lng1,lat2,lng2)
{
 var O = Math.PI/180 ;
 var b = lat1 * O ;
 var c = lat2 * O ;
 var d = b - c ;
 var e = (lng1 * O) - (lng2 * O) ;
 var f = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(d/2),2)+Math.cos(b)*Math.cos(c)*Math.pow(Math.sin(e/2),2)));
 return f*6378137
}


function draw()
{
 var html = '' ;
 poly = [] ; 

 for(var i = 0 ; i < marker.length ;i++)
 {
  poly.push(marker[i].getPoint());
  html += marker[i].getPoint().toUrlValue() + "<br>\n" ;
 }
 if(line)
 {
  map.removeOverlay(line) ;
 }

 poly.push(marker[0].getPoint());

 html += marker[0].getPoint().toUrlValue() + "<br>\n" ;

 line = new GPolyline(poly,'#FF0000', 3, 1) ;
 map.addOverlay(line) ;
 //document.getElementById("sidebar").innerHTML = "Polygon Coordinates:<br>\n" + html ;
}

function drawCircle( )
{
 for(var n = 0 ; n < marker.length ; n++)
 {
  map.removeOverlay( marker[n] ) ;
 }
 
 marker = [] ;
 var points = [] ;
 var point = center.getPoint() ;
 var lat = point.lat() ;
 var lng = point.lng() ;
 if ( center.oldpoint )			// Move radius when center is moved
 {
  var p = radius.getPoint() ;
  var x = point.lat() - center.oldpoint.lat() ;
  var y = point.lng() - center.oldpoint.lng() ;
  radius.setPoint( new GLatLng( p.lat() + x, p.lng() + y) ) ;
 }
 center.oldpoint = point ;

 var Cradius = point.distanceFrom(radius.getPoint()) * 0.000621371192 ;
 var b = radius.getPoint() ;

 var meters = distance(point.lat(),point.lng(),b.lat(),b.lng()) ;

 var Ccolor = '#0000ff' ;		// color blue
 var Cwidth = 3 ;			// width pixels
 var d2r = Math.PI/180 ;		
 var r2d = 180/Math.PI ;		
 var Clat = (Cradius/3963) * r2d ;	

 var Clng = Clat/Math.cos(lat*d2r);
 var Cpoints = [] ;

 var list = '' ;
 for (var i = 0 ; i < 13 ; i++)
 {
  var theta = Math.PI * (i/6) ;
  Cx = lng + (Clng * Math.cos(theta)) ;
  Cy = lat + (Clat * Math.sin(theta)) ;
  Cpoints.push(new GLatLng(Cy,Cx)) ;

  points.push(new GLatLng(Cy,Cx)) ;
 }
 
 for(var n = 0 ; n < (points.length -1) ; n++)
 {
  marker[n] = new GMarker(points[n], {icon:icon, draggable: true});
  map.addOverlay(marker[n]);
  marker[n].enableDragging();
  GEvent.addListener(marker[n],'dragend',function() {draw()});

 }


 draw() ;
 //document.getElementById("distance").innerHTML = Math.round(Cradius * 100)/100 + " Miles (meters: " + Math.round(meters) + ") Radius Centered at " + Math.round(point.lat()*10000)/10000 + "," + Math.round(point.lng()*10000)/10000 + " " + Math.round(b.lat()*10000)/10000 + "," + Math.round(b.lng()*10000)/10000 ;
} 

//]]>
</script>
<script type="text/javascript" >
function testfunction()
{
	document.getElementById("submitbtn").style.display ='none';	
}
</script>

{/literal}

{include file=$header_end}

<body onLoad="load('{$postalcode}',{$userDetArray.radius});"></body>
   <!-- MIDDLE CONTAIN GOES HERE -->
<section class="middle_portion">
	<section class="inner_head">Dashboard</section>
    <section class="inner_containstart">
    	<!-- dashboard Left Content Start -->
        	{include file=$cms_left_content}
        <!-- dashboard Left Content End -->
        <!-- dashboard Right Content Start -->
        	<section class="dash_right">            	                
            {if $msg}<span style="padding:10px">{$msg}</span>{/if}
            	<section class="title_box">
                    <h4>My Service & location</h4>
                    <section class="clear"></section>
                </section>
                <form method="post" action="" name="frmMngProfile" id="frmMngProfile" enctype="multipart/form-data">
                 <input type="hidden" name="hidden_userid" id="hidden_userid" value="{$userDetArray.id}" />
                 

                <section class="profile_wrapp">
                    <dl>
                        <dt><label>Trade Category:  </label></dt>
                        <dd>
                        	<select class="select" name="catname" id="catname" onChange="showJobType(this.value);">
                                <option value="">Select trade category</option>
                                {section name=i loop=$newtradecategoryArray}
                                    <option value="{$newtradecategoryArray[i].id}" {if $userDetArray.tradeid eq $newtradecategoryArray[i].id} selected="selected" {/if}>{$newtradecategoryArray[i].trade_category}</option>
                                {/section} 
                            </select>
                        </dd>
                        <section class="clear"></section>
                    </dl>

                    <dl>
                        <dt><label>Job Type : </label></dt>
                        <dd>
                        	 <div id="isJobType">
                                <select class="select" multiple="multiple" name="jobtype[]" id="jobtype" style="height:auto;">                    	
                                    {section name=i loop=$tradejobtypeArray}
                                        <option value="{$tradejobtypeArray[i].id}" {if $tradejobtypeArray[i].checked eq 'select'} selected="selected" {/if}>{$tradejobtypeArray[i].trade_category}</option>
                                    {/section} 
                                </select>
                             </div>   
                             <div id="isnullJobType" style="display:none;">
                                <select class="select" multiple="multiple" style="height:auto;">                    	
                                    
                                </select>
                             </div>   
                        </dd>
                        <section class="clear"></section>
                    </dl>
                    <section class="clear"></section>
                    <dl>
                        <dt><label>Postal Code : </label></dt>
                        <dd><input type="text" class="input" name="googlesearch" id="googlesearch" value="{$userDetArray.workarea}" onKeyPress="return numbersonly(event);" onChange="testfunction();"/>
							<div id="google_address_error" ></div>
                        </dd>
                        <section class="clear"></section>
                    </dl>
                    <dl>
                        <dt><label>Radius : </label></dt>
                        <dd>
	                       	  <select class="select" name="radius" id="radius" style="width:160px; float:left" onChange="testfunction();" >
                                    <option value="">Select Radius</option>
                                     <option value="1" {if $userDetArray.radius eq '1'} selected="selected" {/if}>1 Kilometre</option>
                                    <option value="5"  {if $userDetArray.radius eq '5'} selected="selected" {/if}>5 Kilometres</option>
                                    <option value="10" {if $userDetArray.radius eq '10'} selected="selected" {/if}>10 Kilometres</option>
                                    <option value="15" {if $userDetArray.radius eq '15'} selected="selected" {/if}>15 Kilometres</option>
                                    <option value="20" {if $userDetArray.radius eq '20'} selected="selected" {/if}>20 Kilometres</option>
                                    <option value="25" {if $userDetArray.radius eq '25'} selected="selected" {/if}>25 Kilometres</option>
                                    <option value="50" {if $userDetArray.radius eq '50'} selected="selected" {/if}>50 Kilometres</option>
                              </select> 
                          <input type="button" style="margin-left:15px;" class="blue_btn lF" value="Go" onClick="return search_google();" >
                         <div id="radius_errror" class="lF clear"></div>  
                      	<section class="clear"></section>
                        </dd>
                        <section class="clear"></section>
                        
                    </dl>
                    <section class="clear"></section>
                  <div id="distance"></div>
                 <dl style="width:100%; margin-left:129px;"> 
                  <section>
                      {literal}
                        <script language="javascript">
                        <!--
                         if( window.innerHeight )
							 {
							  var width = 530;//window.innerWidth - 350 ;
							  var height = 350;//window.innerHeight - 90 ; 
							 } else
							 {
							  var width = 530;//document.documentElement.offsetWidth - 400 ;
							  var height = 350;//document.documentElement.offsetHeight - 110 ; 
							 }
							 document.write('<div id="map" class="lF" style="width: ' + width  + 'px; height:' + height + 'px; border: thin solid black; "></div>') ;
                         // -->
                        </script>
                        
                        <script language="javascript">
							<!--
							 //document.write('<div id="sidebar" style="width: 250px; height:' + (height - 250) + 'px; overflow: auto; font-family:Verdana,sans-serif;">') ;
							 // -->
						</script>
            
                        {/literal}
                   </section>
       	        <section class="clear"></section>
                </dl>
                <div id="submitbtn" >
                <section class="bt_save_wrapp" style="margin-bottom:20px;">
                    	<input type="submit" value="Save" name="save_btn" id="save_btn" class="bt_save"/>
                        <input type="button" value="Cancel" name="cancel_btn" id="cancel_btn" class="bt_save" onClick="window.location.href='{$siteroot}/myaccount/'"/>
                </section>
                </div>    
                </section>                
                </form> 
            </section>
        <!-- dashboard Right Content End -->
        	<section class="clear"></section>
    </section>
</section>
{include file=$footer}
